import { GlobalStore } from '@/store/index'
import { DEFAULT_PRIMARY } from '@/config/config'
import { getLightColor, getDarkColor } from '@/utils/color'

export const useTheme = () => {
  const settingsStore = GlobalStore()
  const themeConfig = computed(() => settingsStore.themeConfig)

  // 切换暗黑模式
  const switchDark = () => {
    const body = document.documentElement as HTMLElement
    if (themeConfig.value.isDark) body.setAttribute('class', 'dark')
    else body.setAttribute('class', '')
    changePrimary(themeConfig.value.primary)
  }

  // 修改主题颜色
  const changePrimary = (val: string | null) => {
    if (!val) {
      val = DEFAULT_PRIMARY
      ElMessage({
        type: 'success',
        message: `主题颜色已重置为 ${DEFAULT_PRIMARY}`,
      })
    }
    settingsStore.setThemeConfig({ ...themeConfig.value, primary: val })
    // 为了兼容暗黑模式下主题颜色也正常，以下方法计算主题颜色 由深到浅 的具体颜色
    document.documentElement.style.setProperty('--el-color-primary', themeConfig.value.primary)
    document.documentElement.style.setProperty(
      '--el-color-primary-dark-2',
      themeConfig.value.isDark
        ? `${getLightColor(themeConfig.value.primary, 0.2)}`
        : `${getDarkColor(themeConfig.value.primary, 0.3)}`
    )
    // 颜色加深或变浅
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${i}`,
        themeConfig.value.isDark
          ? `${getDarkColor(themeConfig.value.primary, i / 10)}`
          : `${getLightColor(themeConfig.value.primary, i / 10)}`
      )
    }
  }
  // 灰色和弱色切换
  const changeGreyOrWeak = (value: string | number | boolean, type: string) => {
    const body = document.body as HTMLElement
    if (!value) return body.setAttribute('style', '')
    if (type === 'grey') body.setAttribute('style', 'filter: grayscale(1)')
    if (type === 'weak') body.setAttribute('style', 'filter: invert(80%)')
    let propName = type === 'grey' ? 'isWeak' : 'isGrey'
    settingsStore.setThemeConfig({ ...themeConfig.value, [propName]: false })
  }

  // 初始化主题
  const initTheme = () => {
    switchDark()
    if (themeConfig.value.isGrey) changeGreyOrWeak(true, 'grey')
    if (themeConfig.value.isWeak) changeGreyOrWeak(true, 'weak')
  }
  return {
    initTheme,
    switchDark,
    changePrimary,
    changeGreyOrWeak,
  }
}
